<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App - Rainbow</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/libs/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.css">
    <script src="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.umd.min.js"></script>
    <link rel="stylesheet" href="../static/libs/highlight/highlight@9.12.0.min.css">
    <link rel="stylesheet" href="../static/libs/highlight/vs.min.css">
    <script src="../static/libs/highlight/highlight@9.12.0.min.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
      .demo-header{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .code-font{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .demo-header h1{
        margin-right: auto;
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 42px;
      }
      .demo-header h1 span{
        font-size: 60px;
        transform: rotate(7deg);
      }
      pre code{
        font-family: Consolas,Menlo,Courier,monospace;
        line-height: 2;
      }
      pre textarea{
        display: none;
      }
      .hljs{
        background-color: #f7f7f7;
      }
      .hljs-name, .hljs-keyword{
        color: #6089ec;
        font-weight: normal;
      }
      
      .anchor{
        margin-top: 30px;
      }
      .anchor h2, .anchor h3{
        margin-bottom: 10px;
      }
      
      .margin-top-10{
        margin-top: 10px;
      }
      
      .api table{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .api table th{
        white-space: nowrap;
      }
      
      
    </style>
  </head>
  <body>
    <r-app id="app" v-cloak>
      <div slot="header" align-items="center" class="demo-header">
        <h1 style="color: #f4615c"> <span>R</span><i>ainbow.Doc</i></h1>
        <r-icon type="paper-airplane"></r-icon>
        <r-dropdown label="木已成鲨鱼" style="margin-left: 4px">
          <r-dropdown-item>个人信息</r-dropdown-item>
          <r-dropdown-item>登出</r-dropdown-item>
        </r-dropdown>
      </div>
      <r-menu slot="aside" mode="vertical" v-model="common.activeMenu" expand>
        <r-menu-item name="1" href="start.html">快速上手</r-menu-item>
        <r-sub-menu name="2">
          <template slot="title">Basic</template>
          <r-menu-item name="2-1" href="grid.html">
            <r-icon type="ios-grid-view-outline"></r-icon>Grid 栅格
          </r-menu-item>
          <r-menu-item name="2-2" href="app.html">
            <r-icon type="ios-browsers-outline"></r-icon>App 布局
          </r-menu-item>
          <r-menu-item name="2-3" href="button.html">
            <r-icon type="social-youtube-outline"></r-icon>Button 按钮
          </r-menu-item>
          <r-menu-item name="2-4" href="icon.html">
            <r-icon type="ios-heart-outline"></r-icon>Icon 图标
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="3">
          <template slot="title">Form</template>
          <r-menu-item name="3-1" href="input.html">
            <r-icon type="ios-compose-outline"></r-icon>Input 输入框
          </r-menu-item>
          <r-menu-item name="3-2" href="radio.html">
            <r-icon type="ios-circle-filled"></r-icon>Radio 单选框
          </r-menu-item>
          <r-menu-item name="3-3" href="checkbox.html">
            <r-icon type="android-checkbox-outline"></r-icon>Checkbox 多选框
          </r-menu-item>
          <r-menu-item name="3-4" href="table.html">
            <r-icon type="ios-grid-view"></r-icon>Table 表格
          </r-menu-item>
          <r-menu-item name="3-5" href="select.html">
            <r-icon type="ios-arrow-down"></r-icon>Select 选择器
          </r-menu-item>
          <r-menu-item name="3-6" href="datepicker.html">
            <r-icon type="ios-calendar-outline"></r-icon>DatePicker 日期选择器
          </r-menu-item>
          <r-menu-item name="3-7" href="timepicker.html">
            <r-icon type="ios-clock-outline"></r-icon>TimePicker 时间选择器
          </r-menu-item>
          <r-menu-item name="3-8" href="upload.html">
            <r-icon type="ios-cloud-upload-outline"></r-icon>Upload 上传
          </r-menu-item>
          <r-menu-item name="3-9" href="form.html">
            <r-icon type="ios-list-outline"></r-icon>Form 表单
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="4">
          <template slot="title">View</template>
          <r-menu-item name="4-1" href="card.html">
            <r-icon type="ios-browsers-outline"></r-icon>Card 卡片
          </r-menu-item>
          <r-menu-item name="4-2" href="message.html">
            <r-icon type="ios-information-outline"></r-icon>Message 全局提示
          </r-menu-item>
          <r-menu-item name="4-3" href="modal.html">
            <r-icon type="ios-chatbubble-outline"></r-icon>Modal 对话框
          </r-menu-item>
          <r-menu-item name="4-4" href="progress.html">
            <r-icon type="android-remove"></r-icon>Progress 进度条
          </r-menu-item>
          <r-menu-item name="4-5" href="timeline.html">
            <r-icon type="android-more-vertical"></r-icon>Timeline 时间轴
          </r-menu-item>
          <r-menu-item name="4-6" href="tag.html">
            <r-icon type="ios-pricetags-outline"></r-icon>Tag 标签
          </r-menu-item>
          <r-menu-item name="4-7" href="tooltip.html">
            <r-icon type="chatbox-working"></r-icon>Tooltip 文字提示
          </r-menu-item>
          <r-menu-item name="4-8" href="tree.html">
            <r-icon type="network"></r-icon>Tree 树形控件
          </r-menu-item>
          <r-menu-item name="4-9" href="breadcrumb.html">
            <r-icon type="aperture"></r-icon>Breadcrumb 面包屑
          </r-menu-item>
          <r-menu-item name="4-10" href="alert.html">
            <r-icon type="android-alert"></r-icon>Alert 警告
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="5">
          <template slot="title">Navigation</template>
          <r-menu-item name="5-1" href="menu.html">
            <r-icon type="navicon-round"></r-icon>Menu 导航菜单
          </r-menu-item>
          <r-menu-item name="5-2" href="tabs.html">
            <r-icon type="social-windows-outline"></r-icon>Tabs 标签页
          </r-menu-item>
          <r-menu-item name="5-3" href="dropdown.html">
            <r-icon type="arrow-down-b"></r-icon>Dropdown 下拉菜单
          </r-menu-item>
          <r-menu-item name="5-4" href="page.html">
            <r-icon type="ios-book-outline"></r-icon>Page 分页
          </r-menu-item>
        </r-sub-menu>
      </r-menu>
      <div slot="main">
        <h1>App布局</h1>
        <div class="anchor">
          <h2 id="CDN_引入"></h2>
          <pre><code class="html"></code>
            <textarea><r-app>
  <div slot="header"></div>
  <div slot="aside"></div>
  <div slot="main"></div>
</r-app>

            </textarea></pre>
        </div>
      </div>
    </r-app>
    <script>
      new Vue({
        el: '#app',
        watch: {
          'common.componentValue' () {
            location.href = this.common.componentValue + '.html'
          }
        },
        data () {
          return {
            common: {
              componentValue: '',
              activeMenu: '2-2'
            }
          }
        }
      })
    </script>
  </body>
</html>
<script>
  setTimeout(function (){
    var preNodes = document.getElementsByTagName('pre')
    for (var i=0, preNode, codeNode, textNode; i<preNodes.length; i++){
      preNode = preNodes[i]
      codeNode = preNode.querySelector('code')
      textNode = preNode.querySelector('textarea')
  
      codeNode.innerText = textNode.value.trim()
      hljs.highlightBlock(codeNode)
    }
  }, 100)
</script>